
@import "../common/constant.less";

.index-page {






  .index-banner {
    height: 34vh;

    background-image: url("./assets/IndexPage-Banner.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

  }


  .banner-title-area {
    color: white;
    text-align: center;

    .main-title {

    }

    .subtitle {

    }


  }


  .action-area {
    text-align: center;



    .answer-action {
      display: block;
      color: @vote-man-red;
      background-color: white;

      width: 80%;

      margin-left: auto;
      margin-right: auto;

      .radius-vertical-center(48px);

    }



    .share-action {

      background-color: @vote-man-red;

      width: 38%;

      margin-left: auto;
      margin-right: auto;



      .radius-vertical-center(30px);

    }

  }




  .rule-box {
    width: 80vw;
    box-sizing: padding-box;


    padding:  0 @page-hor-margin 0 @page-hor-margin;

    .rule-title-area {

      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-left,.title-right {
        flex-basis: 40px;
        flex-grow: 0;
        flex-shrink: 0;

        height: 30px;

      }

      .title-right {
        background-image: url("./assets/close-icon.png");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }


      .title-center {

      }






    } .rule-title-area {
        width: 80vw;

        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-left,.title-right {
          flex-basis: 40px;
          flex-grow: 0;
          flex-shrink: 0;

          height: 30px;

        }

        .title-right {
          background-image: url("./assets/close-icon.png");
          background-position: center center;
          background-size: 100% 100%;
          background-repeat: no-repeat;


        }


        .title-center {

        }






      }
  }





}







.award {
  @award-height:30px;
  @award-border-radius: @award-height / 2;

  color: white;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  width: 7em;
  height: @award-height;
  margin: 0;

  border-style: solid;
  border-color: white;
  border-width: 1px;

  border-radius: @award-border-radius;



  .award-text{

    flex-basis: content;
  }


  .portrait {
    flex-basis: 27px;
    flex-shrink: 0;
    flex-grow: 0;

    height: 27px;

    border-radius: 50%;

    background-image: url("./assets/portrait.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }


}